<template>
  {{ d.num.toFixed(0) }}
</template>

<script setup>
import { reactive, watch } from "vue";
import gsap from "gsap";

// console.log("gsap:",gsap);

const props = defineProps({
  value: {
    // 数字滚动的终点
    type: Number,
    default: 0,
  },
});

const d = reactive({
  num: 0,
});

function AnimateToValue() {
  gsap.to(d, {
    // 参数1：数字起始值 参数2： 动画时长，数字终点
    duration: 0.5,
    num: props.value,
  });
}

AnimateToValue();
// 如果value有变化就重新执行一下动画
watch(
  () => props.value,
  () => AnimateToValue(),
);
</script>
